import { color } from '@rneui/base';
import React,{useState,useEffect} from 'react'
import {View,Text,TouchableOpacity,StyleSheet,ScrollView,Image,Button,FlatList} from 'react-native';
import '../../global'
import { useDispatch,useSelector } from 'react-redux';

const RenderItem = ({ item,navigation,tab,setData }) => {
    const list=useSelector(state=>state.list)
    return (
        <TouchableOpacity style={{marginTop:changeH(20)}} onPress={()=>{navigation.navigate('EDetail',{title:item.title,content:item.content,brief:item.brief})
        fetch('https://wx.qasdwer.top:8080/exam/readnum/',{
          method:'put',
          headers:{
            'content-type':'application/json;charset=utf-8'
          },
          body:JSON.stringify({title:item.title,tab:tab,num:item.readnum})
        })
        .then(res=>res.json())
        .then(res=>{ 
            setData(res)
        })
        .catch((error)=>{
            console.log("Error");
            throw error;
          }); 
          if(list.isLogin==true){
            fetch('https://wx.qasdwer.top:8080/user/examhistory',{
                method:'put',
                headers:{
                  'content-type':'application/json;charset=utf-8'
                },
                body:JSON.stringify({title:item.title,content:item.content,brief:item.brief,num:item.readnum,account:list.account})
              })
              .catch((error)=>{
                  console.log("Error");
                  throw error;
                });   
          }
          
        }} activeOpacity={1}>
            <View style={{width:'100%',height:changeH(200)}}>
                <Text style={{marginLeft:changeW(30),marginTop:changeH(15),width:'55%',fontSize:changeW(30),fontWeight:'bold'}} numberOfLines={1} ellipsizeMode='tail'>{item.title}</Text>
                <Text style={{marginLeft:changeW(30),marginTop:changeH(15),width:'93%',fontSize:changeW(22)}} numberOfLines={3} ellipsizeMode='tail'>{item.brief}</Text>
            </View>
            <Text style={{marginLeft:changeW(30),color:'grey'}}>{item.readnum}次阅读</Text>
            <View style={{width:'100%',height:changeH(5),backgroundColor:'#F5F5F5',marginTop:changeH(10)}}></View>
        </TouchableOpacity>
    )
}

const Card = ({name,navigation,data,data0,data1,data2,setData,setData0,setData1,setData2})=>{
    if(name=='know'){
        return (
            <FlatList
            data={data}
            renderItem={({item}) => {return <RenderItem item={item} navigation={navigation} tab={name} setData={setData}/>}}
    />
        )
    }
    else if(name=='policy'){
        return (
        <View>
            <FlatList
            data={data0}
            renderItem={({item}) => {return <RenderItem item={item} navigation={navigation} tab={name} setData={setData0}/>}}
    />
    </View>
    )
    }
    else if(name=='college'){
        return (<View>
            <FlatList
            data={data1}
            renderItem={({item}) => {return <RenderItem item={item} navigation={navigation} tab={name} setData={setData1}/>}}
    />
    </View>)
    }else{
        return (<View>
        <FlatList
        data={data2}
        renderItem={({item}) => {return <RenderItem item={item} navigation={navigation} tab={name} setData={setData2}/>}}
/>
</View>)
    }
}



const Ency = ({navigation}) => {
    //颜色
    const [colors,setColors] = useState(['rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)'])
    const [tab,setTab]=useState('know');
    const [data,setData] = useState([]);
    const [data0,setData0] = useState([]);
    const [data1,setData1] = useState([]);
    const [data2,setData2] = useState([]);

    useEffect(()=>{
       fetch('https://wx.qasdwer.top:8080/exam/knowledge')
      .then(res=>res.json())
      .then(res=>{ 
        setData(res)
    
      })
      .catch((error)=>{
          console.log("Error");
          throw error;
        });

        //考研政策
        fetch('https://wx.qasdwer.top:8080/exam/policy')
        .then(res=>res.json())
        .then(res=>{ 
          setData0(res)
      
        })
        //选择院校
        fetch('https://wx.qasdwer.top:8080/exam/choose')
        .then(res=>res.json())
        .then(res=>{ 
          setData1(res)
      
        })
        //备考指南
        fetch('https://wx.qasdwer.top:8080/exam/guide')
        .then(res=>res.json())
        .then(res=>{ 
          setData2(res)
      
        })

    },[])
   
    
   

    return (
        <View style={{backgroundColor:'rgb(255,255,255)',width:'100%'}}>
            <View style={{width:'100%',display:'flex',marginTop:changeH(15),flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[0]}]}
                onPress={()=>{
                    setColors(['rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)'])
                    setTab('know')
                }}
                ><Text style={styles.text}>考研常识</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[1]}]}
                onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)'])
                    setTab('policy')
                }}
                ><Text style={styles.text}>考研政策</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[2]}]}
                 onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(234,234,234)','rgb(204,190,151)','rgb(234,234,234)'])
                    setTab('college')
                }}
                ><Text style={styles.text}>选择院校</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[3]}]}  
                 onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)','rgb(204,190,151)'])
                    setTab('target')
                }}
                ><Text style={styles.text}>备考指南</Text></TouchableOpacity>
            </View>
            <View style={{marginTop:changeH(25),height:changeH(1360)}}>
            <Card name={tab} navigation={navigation} data={data} data0={data0} data1={data1} data2={data2} setData={setData} setData0={setData0} setData1={setData1} setData2={setData2}></Card>
                
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    button:{
        width:changeW(130),
        height:changeH(70),
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:40
    },
    text:{
        fontSize:changeW(20)
    }
})

export default Ency
